<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>待办任务列表</title>
  <style>
    #app {
      width: 800px;
      margin: 0 auto;
      padding: 10px;
      border: 1px solid #ccc;
    }

    .content {
      width: 700px;
      margin: 0 auto;
    }

    .title {
      text-align: center;
    }

    .btn {
      height: 40px;
      width: 100px;
      margin-left: 10px;
      padding: 5px 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #fff;
      cursor: pointer;
    }

    .all-count {
      background-color: #1363e3;
      color: #fff;
      padding: 10px 10px;
      border-radius: 5px;
    }

    .unfinish-count {
      background-color: #f4ad07;
      color: #fff;
      padding: 10px 10px;
      border-radius: 5px;
    }

    .task-input {
      width: 430px;
      height: 30px;
      padding: 5px 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #fff;
      font-size: 16px;
    }

    .task-list {
      border-radius: 5px;
      list-style: none;
      padding: 0px;
    }

    .task-list li {
      padding: 5px;
      border: 1px solid #ccc;
      margin-top: 3px;
      border-radius: 5px;
      height: 40px;
      line-height: 40px;
    }

    .ckbox {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }

    .done {
      text-decoration: line-through;
      color: #fff;
      background-color: green;
    }

    .normal {
      color: #000;
      background-color: #fff;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 根元素 -->
    <h1 class="title">我的待办任务</h1>
    <!-- 标题 -->
    <div class="content">
      <p>
        <!-- 任务总数 -->
        <span class="all-count">任务总数：{{totalTasks}} 个</span>
        <!-- 未完成任务数 -->
        <span class="unfinish-count">未完成：{{unfinishedTasks}} 个</span>
      </p>
      <p>
        <!-- 输入新任务 -->
        <input class="task-input" v-model="newTask" placeholder="请输入新待办任务" type="text" />
        <!-- 添加任务按钮 -->
        <button class="btn" @click="addTask">添加任务</button>
        <!-- 清除已完成任务按钮 -->
        <button class="btn" @click="clearCompleted">清除已完成</button>
      </p>
      <p>
        <h3>任务列表</h3>
      </p>
      <!-- 任务列表 -->
      <ul class="task-list">
        <li v-for="task in tasks" :key="task.id" :class="task.done? 'done' : 'normal'">
          <!-- 任务完成复选框 -->
          <input type="checkbox" class="ckbox" v-model="task.done" />
          <!-- 编辑任务输入框 -->
          <input type="text" class="task-input" v-if="isEditing(task)" v-model="task.content" @blur="saveTask(task)"
            style="display: none;" />
          <!-- 任务内容 -->
          <span @click="editTask(task)" v-if="!isEditing(task)">{{task.content}}</span>
        </li>
      </ul>
    </div>

  </div>

  <script src="js/vue.js"></script>
  <script>
    // 创建一个 Vue 实例
    let app = new Vue({
      // 绑定到 id 为 app 的元素
      el: '#app',
      // 定义数据
      data: {
        // 定义任务列表
        tasks: [{
            id: 1,
            content: '学习 Vue',
            done: false
          },
          {
            id: 2,
            content: '学习 React',
            done: true
          },
          {
            id: 3,
            content: '学习 Angular',
            done: false
          },
        ],
        // 定义新任务的输入框内容
        newTask: '',
      },
      // 定义计算属性
      computed: {
        // 计算任务总数
        totalTasks() {
          return this.tasks.length;
        },
        // 计算未完成任务数
        unfinishedTasks() {
          return this.tasks.filter(task => !task.done).length;
        }
      },
      // 定义方法
      methods: {
        // 添加任务
        addTask() {
          // 如果新任务不为空
          if (this.newTask.trim() !== '') {
            // 将新任务添加到任务列表
            this.tasks.push({
              id: Date.now(),
              content: this.newTask,
              done: false
            });
            // 清空输入框
            this.newTask = '';
          }
        },
        // 清除已完成任务
        clearCompleted() {
          // 过滤掉已完成任务
          this.tasks = this.tasks.filter(task => !task.done);
        },
        // 编辑任务
        editTask(task) {
          // 设置任务为编辑状态
          task.editing = true;
        },
        // 判断任务是否处于编辑状态
        isEditing(task) {
          return task.editing;
        },
        // 保存任务
        saveTask(task) {
          // 设置任务为非编辑状态
          task.editing = false;
        }
      }
    });
  </script>
</body>

</html>